$(document).ready(_ => {

//   $('.todo_box').css('top',$(document).height()-20 + 'px');
  $('.todo_diong').hide();
  //显示或者隐藏待办事项
  $('.todo_title').click(_ => {
    $('.todo_diong').fadeToggle(200);
    $("#title").focus();
  })


  load();
  // 存储的数据格式：var todolist =  [{ title : ‘xxx’, done: false}]
  $("#title").keydown(function(e) {
      if (e.keyCode === 13) { //是否按下回车键
        if(!$("#title").val()) return;
        //读取本地存储原来得数据
        var local = getData();
        // console.log(local);
        //把最新得数据追加给local
        local.push({ title: $(this).val(), done: false });
        //把数据存在给本地
        saveDate(local);
        //本地存储的数据渲染到页面中
        load();
      }
  });
  //输入后清空输入框
  $("#title").keyup(function(e) {
      if (e.keyCode === 13) {
          $(this).val("");
      }
  });

  //ToDoList删除操作
  $("#todolist, #donelist").on("click", "a", function() {
      //获取本地存储
      var data = getData();
      //修改数据
      var index = $(this).attr("id");
      data.splice(index, 1);
      //保存到本地存储
      saveDate(data);
      //重新渲染页面
      load();
  });

  //正在进行和已经完成的操作
  $("#todolist, #donelist").on("click", "input", function() {
      //获取本地存储的数据
      var data = getData();
      //修改数据
      var index = $(this).siblings("a").attr("id");
      data[index].done = $(this).prop("checked");
      //保存数据
      saveDate(data);
      //重新渲染
      load();
  });

  // 读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
  function getData() {
      var data = localStorage.getItem("todolist");
      if (data !== null) {
          return JSON.parse(data); //转换为对象格式得数据
      } else {
          return [];
      }
  }

  //保存本地存储数据
  function saveDate(data) {
      //转换为字符串格式保存
      localStorage.setItem("todolist", JSON.stringify(data));
  }

  //渲染页面
  function load() {
      //读取本地数据
      var data = getData();
      //遍历之前先清空ol,ul里面的元素内容
      $("#todolist, #donelist").empty();
      var todoCount = 0; //正在进行的个数
      var doneCount = 0; //已经完成的个数
      //遍历数据
      $.each(data, function(i, e) {
          if (e.done) {
              $("#donelist").prepend("<li><input checked='checked' type='checkbox'>" + e.title + "<a id=" + i + " href='javascript:;'></a></li>");
              doneCount++;
          } else {
              $("#todolist").prepend("<li><input type='checkbox'>" + e.title + "<a id=" + i + " href='javascript:;'></a></li>");
              todoCount++;
          }
      });
      $("#todocount").text(todoCount);
      $("#donecount").text(doneCount);
  }

  //双击改变内容
  function changeText() {
      $("#todolist").on("dblclick", "li", function(e) {
          e.stopPropagation();
          var str = $(this).text();
          $(this).prepend("<input class='changetext' type='text' />");
          var input = $(this).children(".changetext");
          input.val(str).select();

          // 文本框失去焦点时，val给text
          $(this).children(".changetext").blur(function() {
              //获取本地存储的数据
              var data = getData();
              //修改数据
              var index = $(this).siblings("a").attr("id");
              data[index].title = input.val();
              //保存数据
              saveDate(data);
              //重新渲染
              load();
          });
          $(this).children(".changetext").keyup(function(e) {
              if (e.keyCode === 13) {
                  $(this).blur();
              }
          });
      });
  }
  changeText();

})
